<template>
  <div>
    <div class="main-box main-boxa">
      <div class="tab tabs-a" ref="tab">
        <ul class="tab_content tabs wrapper" ref="tabWrapper">
          <li class="tab_item" @click="tabIndex=0">
            <a :class="{active: tabIndex==0 }">开大系统导航</a>
          </li>
          <li class="tab_item" @click="tabIndex=1">
            <a :class="{active: tabIndex==1 }">教师频道</a>
          </li>
        </ul>
      </div>
      <div class="tabs-content tabs-a-con" v-show="tabIndex==0">
        <div>
          <ul class="channel">
            <li><a href="http://www.jxrtvu.net.cn/"> 揭阳开放大学 </a></li>
            <li><a href="http://heyuan.gdrtvu.edu.cn/"> 河源开放大学 </a></li>
            <li><a href="http://www.ouchn.edu.cn"> 国家开放大学 </a></li>
            <li><a href="http://www.gdrtvu.edu.cn"> 广东开放大学</a></li>
            <li><a href="http://www.ougz.com.cn"> 广州开放大学</a></li>
            <li><a href="http://www.szrtvu.com.cn"> 深圳开放大学</a></li>
            <li><a href="http://www.dgou.cn"> 东莞开放大学</a></li>
            <li><a href="http://www.zhrtvu.net"> 珠海开放大学</a></li>
            <li><a href="http://www.mmrtvu.gd.cn/"> 茂名开放大学</a></li>
            <li><a href="http://www.yjtvu.cn"> 阳江开放大学</a></li>
            <li><a href="http://www.fsou.edu.cn"> 佛山开放大学</a></li>
            <li><a href="http://www.jmtvu.net"> 江门开放大学</a></li>
            <li><a href="http://www.sttvu.net"> 汕头开放大学</a></li>
            <li><a href="http://www.ouswgd.cn/"> 汕尾开放大学</a></li>
            <li><a href="http://www.czdd.net"> 潮州开放大学</a></li>
            <li><a href="http://www.mzrtvu.com"> 梅州开放大学</a></li>
            <li><a href="http://www.sgrtvu.net.cn"> 韶关开放大学</a></li>
            <li><a href="http://www.hzrtvu.org"> 惠州开放大学</a></li>
            <li><a href="http://www.zqtvu.com.cn"> 肇庆开放大学</a></li>
            <li><a href="http://www.ouzj.com.cn/"> 湛江开放大学</a></li>
            <li><a href="http://yunfu.gdrtvu.edu.cn/"> 云浮开放大学</a></li>
            <li><a href="http://www.ounh.org/"> 南海开放大学</a></li>
            <li><a href="http://www.zhongshanou.cn"> 中山开放大学</a></li>
          </ul>
        </div>
      </div>
      <div class="tabs-content tabs-a-con" v-show="tabIndex==1">
        <div>
          <ul class="channel">
            <li><a href="http://www.zshlll.cn"> 中山市全民终身学习平台 </a></li>
            <li><a href="http://www.ouchn.cn/"> 国家开放大学学习网 </a></li>
            <li><a href="http://course.ougd.cn/login/index.php"> 广东开放大学网络教学平台 </a></li>
            <li><a href="https://ougd.gaoxiaobang.com/"> 广东开放大学MOOC学习平台 </a></li>
            <li><a href="http://library.gdrtvu.edu.cn/"> 广东开放大学图书馆 </a></li>
            <li><a href="http://61.142.113.190/menber/index.asp"> 中山开放大学学习平台 </a></li>
            <li><a href="http://xk.gdrtvu.edu.cn/index.asp"> 广东开放大学形成性测评系统 </a></li>
            <li><a href="http://210.38.32.196/"> 广东开放大学试题库检索系统 </a></li>
            <li><a href="http://lunwen.gdrtvu.edu.cn/"> 论文管理系统 </a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';

  export default {
    name: "Alleyway",
    data() {
      return {
        tabIndex: 0
      }
    },
    mounted() {
      let width = 0;
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tab, {click: true, scrollX: true});
        } else {
          this.scroll.refresh()
        }
      });
    }
  }

</script>

<style scoped>
  .wrapper {
    position: relative;
    height: 45px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
  }

  .tabs {
    border: none;
  }

  .tab {
    width: 100%;
    overflow: hidden;
    padding-left: 10px;
  }

  .tab_content {
    line-height: 1rem;
    display: flex;
  }

  .tab_item {
    margin-right: 20px;
  }

  .active {
    color: #930007;
    position: relative;
    background: #fff;
  }

  .active:before {
    content: "";
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #930007;
    position: absolute;
    bottom: 2px;
  }
</style>
